<template>
  <div class="all-list">
    <div class="all-head">
      <span v-show="type">{{type}}</span>
      <span v-show="rank">{{rank}}</span>
    </div>
    <ul class="all">
      <li v-for="(item,index) in all"
          class="all-item">
        <img :src="item.all"
             alt="">
        <p>{{item.txt}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['all','type','rank'],
  data () {
    return {

    }
  }

}
</script>
<style scoped>
.all-list {
  background: white;
  padding: 0.57em 0.28rem;
  border-radius: 0.14rem;
  margin-bottom: 0.85rem;
  color: #232323;
  box-shadow: 0px 2px 6px 0px #e9ecf0;
  font-size: 0.85rem;
}
.all {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.all-item {
  width: 33.3%;
  padding: 0.57rem 0rem;
}
.all-item img {
  width: 67%;
}
.all-head{
  display: flex;
  justify-content: space-between;
  margin-left: 0.57rem;
  margin-right: 0.57rem;
}
</style>